<template>
  <!-- 税务观察 -->
  <div
    v-if="route.params.nation === 'taxwatch'"
    class="container container--hero"
    role="region"
  >
    <div class="region region--full">
      <div class="component component--module breadcrumbs">
        <div class="column column--full">
          <ol class="list list--breadcrumbs">
            <li class="breadcrumb__item">
              <a class="link" href="">
                <span itemprop="name">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">home</font>
                  </font>
                </span>
              </a>
              <meta itemprop="position" content="1" />
            </li>
            <li class="breadcrumb__item">
              <span itemprop="item" class="link">
                <span itemprop="name">
                  <font style="vertical-align: inherit">
                    <font style="vertical-align: inherit">TaxWatch</font>
                  </font>
                </span>
              </span>
              <meta itemprop="position" content="2" />
            </li>
          </ol>
        </div>
      </div>
      <div class="component component--module special-report">
        <figure class="hero__figure">
          <img
            class="hero__image lazyautosizes lazyloaded"
            src="https://s.marketwatch.com/public/resources/images/MW-IY037_taxwat_ZG_20210111164226.jpg"
          />
        </figure>
        <div class="column column--full align--left">
          <figcaption class="hero__credit">
            <i class="icon icon--info"></i>
            <span class="caption">Sinopoly Watch illustration</span>
          </figcaption>
          <header class="header header--hero" style="border-color: #fdd821">
            <h2 class="title" style="border-color: #fdd821">
              <span class="label">
                <font style="vertical-align: inherit">
                  <font style="vertical-align: inherit">TaxWatch</font>
                </font>
              </span>
            </h2>
          </header>

          <div class="element element--ad is-loaded">
            <div
              id="ad-section-sponsor"
              class="j-ad lazyloaded"
              style="display: none"
            >
              <div
                id="google_ads_iframe_/2/marketwatch.com/personal_finance/taxwatch_0__container__"
                style="border: 0pt none; width: 140px; height: 0px"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--引入 cateGorymenu 传参-->
  <cateGorymenu
    v-if="
      route.params.nation !== 'taxwatch' ||
      route.params.nation !== 'bigmove' ||
      route.params.nation !== 'career' ||
      route.params.nation !== 'human'
    "
  ></cateGorymenu>
  <div class="region region--full">
    <comImg :imgData="imgData"></comImg>
  </div>
  <main id="maincontent" role="main">
    <div class="container container--zone" role="region">
      <!-- 个人财务 -->
      <div class="region region--full removeLive">
        <div class="component component--module quick-links">
          <!-- 引入公共组件 tabText.vue-->
          <tabText
            :listlinkData="uscomlinkData"
            :moreList="moreList"
            @tabChange="tabChange"
          ></tabText>
        </div>
      </div>
      
      <div class="region region--primary">
        <!-- 引入公共组件面包屑  pageHead.vue-->
        <pageHead
          :titleData="titleData"
          v-if="route.params.nation !== 'taxwatch'"
        ></pageHead>
        <!-- 封装 引入 movement D3 传参-->
        <header class="header header--secondary">
          <p class="paragraph">
            {{ topDesc }}
          </p>
        </header>
        <marketLine
          :lastMarketData="lastMarketData"
          v-if="lastMarketData.length > 0"
        ></marketLine>

        <div
          class="component component--module text__block"
          v-if="route.params.nation === 'personalFinance'"
        >
          <div class="column column--primary">
            <div class="element element--textblock">
              <hr />
              <p></p>
              <h3>📩 Personal Finance Daily</h3>
              <p>
                Get a daily roundup of the top reads in personal finance
                delivered to your inbox. Subscribe to Sinopoly Watch's free
                Personal Finance Daily newsletter.
              </p>
              <p><a href="">Sign up</a> ➡</p>
            </div>
          </div>
        </div>
      </div>
      <stickys :sticky="sticky"></stickys>
    </div>
    <div class="container container--zone" role="region">
      <div class="region region--primary">
        <!-- 封装 引入 taxes 传参-->
        <taxes
          :taxesData="taxesData"
          :taxCont="taxCont"
          v-if="taxesData.length > 0"
        ></taxes>
      </div>
    </div>

    <div class="container container--zone" role="region">
      <!-- 引入公共组件  marketPlace.vue  We Make-->
      <marketPlace></marketPlace>

      <!-- 引入 MOST POPULAR 组件 -->
      <mastPopular></mastPopular>
      <!-- 引入封装 头条 -->
      <!-- <frontPage :FrontData="FrontData" :FrontData1="FrontData1" :titleName="titleName"
        v-if="route.params.nation === 'estate'"></frontPage> -->
    </div>

    <div class="container container--zone" role="region">
      <div class="region region--primary">
        <!-- 封装 引入 taxes 传参-->
        <taxes
          :taxesData="taxesData"
          v-if="route.params.nation === 'personalFinance'"
        ></taxes>
        <!-- 封装 引入 movement D3 传参-->
        <movement
          :movementData="movementData"
          :movementData1="movementData1"
          :movementData2="movementData2"
          :spendingData="spendingData"
          :spendingData1="spendingData1"
        >
        </movement>
        <!-- morePersonal -->
        <morePersonal
          :moreHeader="moreHeader"
          :moreData="moreData"
          v-if="moreData.length > 0"
        >
        </morePersonal>
      </div>
      <stickys :sticky="sticky"></stickys>
    </div>
  </main>
  <adverTisement></adverTisement>
</template>

<script setup>
import { newsDataArrays } from "@/api/finance.js";
import cateGorymenu from "@/views/latestNews/cateGorymenu/cateGorymenu.vue"; //头部
// 引入公共组件  marketPlace.vue  We Make
import marketPlace from "@/views/latestNews/hotheHeadlines/marketPlace/marketPlace";
import frontPage from "@/views/latestNews/hotheHeadlines/frontPage/frontPage";
// 引入面包屑模块
import pageHead from "@/components/pageHead/pageHead";
// import '@/text.css';
// 引入 MOST POPULAR 组件
import mastPopular from "@/views/home/mastPopular/mastPopular";
// realEstate.vue
import realEstate from "@/views/personalFinance/realEstate/realEstate";
// 引入 taxes 传参
import taxes from "@/views/personalFinance/taxes/taxes";
// 引入 movement 传参
import movement from "@/views/personalFinance/movement/movement.vue";
import marketLine from "@/views/market/marketLine/marketLine.vue";
// morePersonal
import morePersonal from "@/views/personalFinance/morePersonal/morePersonal";
import adverTisement from "@/views/home/adverTisement/adverTiseMent";
import comImg from "@/components/comImg/comImg.vue";
const imgData = ref("../src/assets/banner.png");
import stickys from "@/components/stickys/stickys.vue";
const sticky = ref("../src/assets/ceAdver.png");
import homeRequest from "@/api/home.js";
const titleData = reactive({
  title: "The Moneyist",
  link: "Home",
  name: "Personal Finance",
  name1: "The Moneyist",
});
const moreHeader = ref({
  content: "MORE PERSONAL FINANCE COVERAGE",
});
const moreHeader1 = ref({
  content: "MORE FROM THE MONEYIST",
});
const { latestData, districtData, newsData1, newsData2, newsData3, moreData1 } =
  newsDataArrays();
import { useRoute } from "vue-router";
// import { onMounted } from 'vue';
const route = useRoute();
const uscomlinkData = ref([]);
const moreList = ref([]);
const tabKey = ref("");
const lastMarketData = ref([]);
const topDesc = ref("");
const titleName = ref({
  title: "",
  name: "",
});

// 监听路由变化改变页面标题
onMounted(() => {
  // 刷新时保持数据
  let name = window.sessionStorage.getItem("titlepfData");
  if (name) {
    titleData.title = JSON.parse(name).typeName;
    titleData.name1 = titleData.title;
    tabKey.value = JSON.parse(name).typeKey;
  }
  const data = localStorage.getItem("tabMdData");
  uscomlinkData.value = JSON.parse(data).pf;
  uscomlinkData.value.forEach((item) => {
    if (item.typeName === "Personal Finance") {
      item.path = "/personalFinance";
    } else if (item.typeName === "The Moneyist") {
      item.path = "/personalFinance/moneyist";
    } else if (item.typeName === "Spending & Saving") {
      item.path = "/personalFinance/spending";
    } else if (item.typeName === "TaxWatch") {
      item.path = "/personalFinance/taxwatch";
    } else if (item.typeName === "Real Estate") {
      item.path = "/personalFinance/estate";
    } else if (item.typeName === "The Big Move") {
      item.path = "/personalFinance/bigmove";
    } else if (item.typeName === "Help My Career") {
      item.path = "/personalFinance/career";
    } else if (item.typeName === "The Human Cost") {
      item.path = "/personalFinance/human";
    } else if (item.typeName === "Financial Face-Off") {
      item.path = "/personalFinance/financial";
    }
  });
  getNewList(tabKey.value);
  getGroupList(tabKey.value);
});
const getNewList = (tabkey) => {
  let data = {
    current: 1,
    size: 50,
    isImg: 1,
    key: tabkey,
  };
  homeRequest.newsData(data).then((res) => {
    if (res.code === 0) {

      if (res.data.records.length > 0) {
        if (res.data.records > 4) {
          lastMarketData.value = res.data.records.slice(0, 4);
        } else {
          lastMarketData.value = res.data.records.slice(0,res.data.records.length);
        }
        topDesc.value = res.data.records[0].summary;
      }
    }
  });
};
const groupData = ref([]);
const taxCont = reactive({});
const taxesData = ref([]);
const moreData = ref([]);
const movementData = ref([]);
const movementData1 = ref([]);
const movementData2 = ref([]);
const spendingData = ref([]);
const spendingData1 = ref([]);
const getGroupList = (tabkey) => {
  //新闻列表
  let data = {
    key: tabkey,
  };
  homeRequest.getgroupData(data).then((res) => {
    if (res.code === 0) {
      groupData.value = res.data
      if (groupData.value.ap.news.length > 0) {
        taxCont.title = groupData.value.ap.author;
        taxCont.desc = groupData.value.ap.news[0].summary;
        taxesData.value = groupData.value.ap.news;
      }
      if (groupData.value.auto.news.length > 0) {
        moreHeader.value.content = groupData.value.auto.author;
        moreData.value = groupData.value.auto.news;
        console.log(moreData.value, "moreData.value");
      }
      if (groupData.value.bs.news.length > 0) {
        movementData.value.push(groupData.value.bs.news[0]);
      }
      if (groupData.value.bs.news.length > 1) {
        movementData1.value.push(groupData.value.bs.news[1]);
      } else {
        movementData1.value = [];
      }
      if (groupData.value.bs.news.length > 2) {
        movementData2.value.push(groupData.value.bs.news[2]);
      } else {
        movementData2.value = [];
      }
      if (groupData.value.bs.news.length > 3) {
        movementData2.value = groupData.value.bs.news.slice(
          3,
          groupData.value.bs.news.length
        );
      }
      if (groupData.value.cl.news.length > 0) {
        spendingData.value.push(groupData.value.cl.news[0]);
        spendingData1.value = groupData.value.cl.news.slice(
          1,
          groupData.value.cl.news.length
        );
      }
    }
  });
};
const tabChange = (data) => {
  // 点击Tba切换时存数据
  window.sessionStorage.setItem("titlepfData", JSON.stringify(data));
  titleData.title = data.typeName;
  titleData.name1 = titleData.title;
  tabKey.value = data.typeKey;
  lastMarketData.value = []
  topDesc.value = ''
  groupData.value = {}
  getNewList(tabKey.value);
  getGroupList(tabKey.value);
};
</script>

<style scoped></style>
